<template>
  <div class="wrap">
    <headerPrint  type="CAT"/>
    <div class="print-wrap" id="printWrapId">
        <p class="ft">KONE Corporation All right reserved 版权所有<span>SOCF-MSD-45/A</span></p>
        <div class="print">
            <div class="header">
                <img class="logo" src="~images/icon.jpg" alt="">
                <div class="title-wrap">
                    <p class="name">安装交付验收报告</p>
                    <p class="name-en">Commissioning Acceptance Test</p>
                </div>
            </div>
            <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="12">
                        <p class="text-en">Distribution</p>
                        <p class="text">分发：{{catInfo.distribution}}</p>
                    </td>
                    <td colspan="12">
                        <p class="text-en">No.</p>
                        <p class="text">编号：{{catInfo.atNo}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="12">
                        <p class="text-en">KONE-Contract No.</p>
                        <p class="text">KONE合同号：{{info.csoffContractNo}}</p>
                    </td>
                    <td colspan="12">
                        <p class="text-en">Machine No.</p>
                        <p class="text">设备编号：{{catInfo.machineNo}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" class="h180">
                        <p class="text-en">Description of Line or Equipment:</p>
                        <p class="text">设备概述</p>
                        <p  class="descText" v-html="catInfo.descriptionOfMe"></p>
                    </td>
                </tr>

                <tr>
                    <td colspan="8">
                        <p class="text-en">Product</p>
                        <p class="text">产品 ：{{catInfo.product}}</p>
                    </td>
                    <td colspan="8" class="">
                        <p class="text-en">Operation No.</p>
                        <p class="text">工序号：{{catInfo.operationNo}}</p>
                    </td>
                    <td colspan="8" class="">
                        <p class="text-en">Date of CAT</p>
                        <p class="text">交付验日期 ：{{moment(catInfo.atTime).format('YYYY-MM-DD')}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" style="height: 150px;">
                        <p class="text-en">KONE-Participants</p>
                        <p class="text">KONE-参加人员 ：{{catInfo.participantNames}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" >
                        <p class="text-en">Suppliers-Participants</p>
                        <p class="text">供货商参加人员：{{catInfo.suppliersParticipants}}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" >
                        <div>
                            <p class="text-en">CAT result:</p>
                            <p class="text">交付验收结果</p>
                        </div>
                        <div>
                            <p class="text-en"><span class="radio" :class="{selectActive:isActiveCurrent(catInfo.atResult,'CAT-accepted')}"></span>CAT-accepted</p>
                            <p class="text">通过交付验收</p>
                        </div>
                        <div>
                            <p class="text-en"><span class="radio" :class="{selectActive:isActiveCurrent(catInfo.atResult,'Conditionally CAT')}"></span>Conditionally CAT</p>
                            <p class="text">有条件的通过交付验收</p>
                        </div>
                        <div>
                            <p class="text-en">Detailed condition see appendix of CAT document</p>
                            <p class="text">详细情况见交付验收报告附录</p>
                        </div>
                    </td>
                </tr>
                <tr class="borderNone">
                    <td colspan="12" >
                        <p class="text underline t-c">KONE通力电梯（昆山）有限公司</p>
                    </td>
                    <td colspan="12" >
                        <p class="text underline  t-c">Supplier供货商</p>
                    </td>
                </tr>
                <tr class="borderNone">
                    <td colspan="3" style="height: 150px;">
                        <p class="text-en">Dept.:</p>
                        <p class="text">部门</p>
                        <p>{{info.orgName}}</p>
                    </td>
                    <td colspan="3" >
                        <p class="text-en">Date:</p>
                        <p class="text">日期</p>
                        <p>{{$moment(catInfo.atTime).format('YYYY-MM-DD')}}</p>
                    </td>
                    <td colspan="6" >
                        <p class="text-en">Signature:</p>
                        <p class="text">签名</p>
                        <div class="signPathWrap">
<!--                            <img v-show="!!item.signPath" v-for="(item,index) in userList" :src="util.filePathToUrl(item.signPath)" alt="" :key="index">-->
                            <approvalSingleUser v-for="(item,index) in info.catApprovals" :key="index" :list="info.catApprovals" :progressCode="item.progressCode"></approvalSingleUser>

                        </div>
                    </td>
                    <td colspan="3" >
                        <p class="text-en">Dept.:</p>
                        <p class="text">部门</p>
                    </td>
                    <td colspan="3" >
                        <p class="text-en">Date:</p>
                        <p class="text">日期</p>
                    </td>
                    <td colspan="6" >
                        <p class="text-en">Signature:</p>
                        <p class="text">签名</p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="print">
            <div class="header">
                <img class="logo" src="~images/icon.jpg" alt="">
                <div class="title-wrap">
                    <p class="name">安装交付验收报告</p>
                    <p class="name-en">Commissioning Acceptance Test</p>
                </div>
            </div>
            <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="24" >
                        <p class="text-en"> Appendix of acceptance document</p>
                        <p class="text">安装交付验收报告附录</p>
                    </td>
                </tr>
                <tr class="nowrap">
                    <td colspan="2">
                        <p class="text-en">Type</p>
                        <p class="text">类别</p>
                    </td>
                    <td colspan="6" >
                        <p class="text-en">Demands</p>
                        <p class="text">要求</p>
                    </td>
                    <td colspan="4" >
                        <p class="text-en">Verify</p>
                        <p class="text">验证</p>
                    </td>
                    <td colspan="4" >
                        <p class="text-en">Result</p>
                        <p class="text">结果(Pass/No)</p>
                    </td>
                    <td colspan="4" >
                        <p class="text-en">Who</p>
                        <p class="text">负责人</p>
                    </td>
                    <td colspan="4" >
                        <p class="text-en">When</p>
                        <p class="text">完成日期</p>
                    </td>
                </tr>
                <tr v-for="(item,index) in catDetailDtos" :key="index" class="breakWord">
                    <td colspan="2">
                        <p class="text">{{ item.type }}</p>
                    </td>
                    <td colspan="6" >
                        <p class="text">{{item.demands}}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{ item.verify }}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{ item.result }}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{ item.who }}</p>
                    </td>
                    <td colspan="4" >
                        <p class="text">{{moment(item.whenTime).format('YYYY-MM-DD')}}</p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
  </div>
</template>


<script>
import headerPrint from './header'
import moment from 'moment'
import mixins from "@/views/devBasic/capex/print/mixins";
import approvalSingleUser from "@/views/devBasic/capex/print/approvalSingleUser.vue";
export default {
  name:"cat",
  mixins:[mixins],
  components:{headerPrint,approvalSingleUser},
  data(){
    return {
      info: this.$store.state.capex['CAT'+this.$route.query.id],
      catInfo:{},
      flows:{},
      catInfo1:{},
      catDetailDtos:[],
      userList:[]
    }
  },
  async mounted() {
    this.catInfo = this.info.catInfo;
    this.catDetailDtos = this.info.catDetailDtos;
    // const userList  = await this.getApproval(this.info.id,['CAT'])
    // if (Array.isArray(userList) && userList.length > 0)
    //   this.userList = userList[0].userModelList || []
  },
  methods:{
    moment,
    isActiveCurrent(str1,str2){
      return str1 == str2
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.print{
  padding: 55px;
}
</style>
